<!-- 供货端-首页 -->
<template>
  <view class="box">
    <view class="box-bg">
      <view
        class="tui-header-box"
        :style="{
          height: height + 'rpx',
          background: 'linear-gradient(200deg, #EA8C1E 0%, #E84A1D 100%)',
        }"
      >
        <view class="header-text">
          <view class="header-name">皖集采</view>
        </view>
        <view class="logout" @click="logOut"> 退出供应商 </view>
      </view>
      <view class="order-count-box">
        <view class="order-count-1" @click="toGoods">
          <view class="order-count-num">
            <span>总商品数</span>
          </view>
          <view class="order-count-2">{{ goods_count }}</view>
        </view>
        <view class="order-count-1" @click="toOrders('', 0)">
          <view class="order-count-num"><span>总订单数</span></view>
          <view class="order-count-2">{{ order_count }}</view>
        </view>
      </view>
    </view>
    <view class="order-Number">
      <view class="order-Number-list">
        <view class="lable">今日总收益</view>
        <view class="order-Number-money">{{ today_order_amount }}</view>
        <view class="order-Number-status">
          <view class="order-Number-status-1" @click="toOrders('state_new', 1)">
            <view class="name">待付款</view>
            <view class="count">{{ pay_count }}</view>
          </view>
          <view class="order-Number-status-1" @click="toOrders('state_pay', 2)">
            <view class="name">待发货</view>
            <view class="count">{{ send_count }}</view>
          </view>
          <view
            class="order-Number-status-1"
            @click="toOrders('state_send', 3)"
          >
            <view class="name">待收货</view>
            <view class="count">{{ receive_count }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="box-card" style="padding-top: 204rpx">
      <view class="box-card-list">
        <view
          class="box-card-list-1"
          v-for="(item, index) in menuList"
          :key="index"
          @click="toManagePage(item.url)"
        >
          <view class="box-card-list-icon">
            <image :src="item.img"></image>
          </view>
          <view class="box-card-list-name">{{ item.text }}</view>
        </view>
      </view>
      <view class="box-card-tab" @click="changeCheck">
        <view
          class="box-card-tab-1"
          :class="checked ? 'box-card-tab-1-active' : ''"
          id="order_num"
          >订单量</view
        >
        <view
          class="box-card-tab-1"
          :class="!checked ? 'box-card-tab-1-active' : ''"
          id="order_amount"
          >成交额</view
        >
      </view>
      <view class="charts-box">
        <qiun-data-charts
          type="area"
          :opts="opts"
          :chartData="chartData"
          :ontouch="true"
        />
      </view>
    </view>
    <Tabber :tabtag="0"></Tabber>
  </view>
</template>

<script>
import Tabber from "@/SupplyEnd/taber/comnpontents/tabber.vue";
export default {
  components: {
    Tabber,
  },
  data() {
    return {
      checked: true,
      menuList: [
        {
          img: "",
          text: "售后订单",
          url: "/SupplyEnd/good/aftersaleslist",
        },
        {
          img: "",
          text: "商品管理",
          url: "/SupplyEnd/good/list",
        },
        {
          img: "",
          text: "评价管理",
          url: "/SupplyEnd/evaluate/list",
        },
      ],
      height: 88,
      goods_count: "", //商品总数
      order_count: "", //订单总数
      today_order_amount: "", //今日总收益
      pay_count: "", //	待付款订单总数
      send_count: "", //待发货订单总数
      receive_count: "", //待收货订单总数

      order_num_stat: {}, //成交额统计
      order_amount_stat: {}, //订单量统计
      chartData: {},
      opts: {
        enableScroll: true,
        color: ["#E96A1D"],
        padding: [15, 0, 0, 0],
        scrollAlign: "left",
        legend: {
          show: false,
        },
        dataLabel: false,
        xAxis: {
          disableGrid: true,
          fontSize: 10,
          fontColor: "#909090",
          itemCount: 7,
          scrollShow: true,
        },
        yAxis: {
          disabled: false,
          gridType: "dash",
          dashLength: 2,
          gridColor: "#C9C9C9",
          data: [
            {
              disabled: false,
              axisLine: false,
              fontColor: "#909090",
              fontSize: 10,
            },
          ],
        },
        extra: {
          area: {
            type: "straight",
            opacity: 0.08,
            addLine: true,
            width: 2,
            gradient: false,
            activeType: "hollow",
          },
        },
      },
    };
  },
  onLoad() {
    this.menuList[0].img = `${this.picUrl}/jh-1/1.png`;
    this.menuList[1].img = `${this.picUrl}/jh-1/2.png`;
    this.menuList[2].img = `${this.picUrl}/jh-1/4.png`;
    let obj = {};
    uni.getSystemInfo({
      success: (res) => {
        this.height = res.statusBarHeight + 88;
        // #ifndef H5
        this.height = res.statusBarHeight + 120;
        // #endif
      },
    });
  },
  onBackPress(res) {
    // 【安卓】禁止左滑、物理返回
    return res.from === "backbutton";
  },
  onReady() {
    this.getHome();
  },
  methods: {
    //登出
    logOut() {
      uni.showModal({
        content: "确认登出吗？",
        confirmColor: "#F54E40", //删除字体的颜色
        success: (res) => {
          if (res.confirm) {
            this.Yes();
          }
        },
      });
    },
    Yes() {
      let url = "";
      if (!uni.getStorageSync("key")) {
        return uni.redirectTo({
          url: "/SupplyEnd/login/login",
        });
      }
      url = "/mobile/index.php?act=supplier-logout&op=index";
      let that = this;
      this.$util
        .request({
          url: url,
          method: "post",
          data: {},
        })
        .then((res) => {
          if (res.error_code == 0) {
            uni.removeStorageSync("key");
            uni.removeStorageSync("supply_userinfo");
            uni.removeStorageSync("api_member_name");
            uni.removeStorageSync("api_member_id");
            uni.removeStorageSync("openid");
            uni.showToast({
              title: "登出成功",
              icon: "success",
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/mainA/login/login",
              });
            }, 500);
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    changeCheck(e) {
      //切换图表
      let id = e.target.id;
      if (id == "order_num") {
        this.chartData = this.order_num_stat;
        this.checked = true;
      } else if (id == "order_amount") {
        this.chartData = this.order_amount_stat;
        this.checked = false;
      }
    },
    getHome() {
      //获取首页数据
      let url = "";
      if (!uni.getStorageSync("key")) {
        return uni.redirectTo({
          url: "/SupplyEnd/login/login",
        });
      }
      url = "/mobile/index.php?act=supplier-index&op=index";
      let that = this;
      this.$util
        .request({
          url: url,
          method: "get",
          data: {},
        })
        .then((res) => {
          if (res.error_code == 0) {
            //更新页面数据
            that.goods_count = res.datas.goods_count;
            that.order_count = res.datas.order_count;
            that.today_order_amount = res.datas.today_order_amount;
            that.pay_count = res.datas.pay_count;
            that.send_count = res.datas.send_count;
            that.receive_count = res.datas.receive_count;
            that.order_num_stat = res.datas.order_num_stat;
            that.order_amount_stat = res.datas.order_amount_stat;
            that.chartData = that.order_num_stat;
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    toManagePage(url) {
      //跳转对应的管理页面
      uni.navigateTo({
        url: url,
      });
    },
    //跳往商品管理
    toGoods() {
      uni.reLaunch({
        url: "/SupplyEnd/good/list",
      });
    },
    //跳往订单管理
    toOrders(state, index) {
      uni.reLaunch({
        url: `/SupplyEnd/good/index?state=${state}&index=${index}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

/deep/ .uni-navbar--fixed {
  background: linear-gradient(200deg, #ea8c1e 0%, #e84a1d 100%);
}

.tui-header-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;

  .header-text {
    width: 100%;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;

    .header-name {
      font-size: 36rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .logout {
    position: absolute;
    bottom: 10rpx;
    left: 40rpx;
    color: #ffffff;
    font-size: 30rpx;
  }
}

.box-bg {
  width: 100%;
  height: 460rpx;
  background: linear-gradient(315deg, #ea8c1e 0%, #e84a1d 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  position: relative;
  /* #ifndef H5 */
  margin-top: 80rpx;
  /* #endif */

  .order-count-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    top: 124rpx;
    z-index: 9;

    .order-count-1 {
      width: 290rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      padding: 20rpx;
      margin-right: 20rpx;

      .order-count-num {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #646464;
        // span{
        //     transform: scale(0.6);
        // }
      }

      .order-count-2 {
        margin-left: 20rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }
    }

    .order-count-1:last-child {
      margin-right: 0rpx;
    }
  }
}

.order-Number {
  height: 300rpx;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
  border-radius: 10rpx;
  opacity: 1;
  margin: -160rpx 30rpx 0;
  position: absolute;
  left: 0;
  right: 0;

  .order-Number-list {
    height: 260rpx;
    padding: 20rpx;
    position: relative;

    .lable {
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #646464;
    }

    .order-Number-money {
      font-size: 40rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #e96a1d;
      text-align: center;
      margin-top: 26rpx;
    }

    .order-Number-status {
      position: absolute;
      bottom: 20rpx;
      left: 76rpx;
      right: 76rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #646464;
      }

      .count {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #e96a1d;
        text-align: center;
      }
    }
  }
}

.box-card {
  background: #ffffff;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 1;
  padding: 30rpx;

  .box-card-list {
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 63rpx;

    .box-card-list-1 {
      .box-card-list-icon {
        width: 100rpx;
        height: 100rpx;

        image {
          width: 100rpx;
          height: 100rpx;
        }
      }

      .box-card-list-name {
        font-size: 26rpx;
        text-align: center;
        margin-top: 10rpx;
        color: #323232;
      }
    }
  }

  .box-card-tab {
    display: flex;
    align-items: center;
    margin-top: 54rpx;

    .box-card-tab-1 {
      margin-right: 100rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    .box-card-tab-1-active {
      font-weight: 600;
      color: #e96a1d;
      position: relative;
    }

    .box-card-tab-1-active::after {
      position: absolute;
      bottom: -4rpx;
      left: 30%;
      right: 30%;
      height: 2rpx;
      content: "";
      background: #e96a1d;
      border-radius: 6rpx;
    }
  }

  .charts-box {
    margin-top: 54rpx;
    padding-bottom: 50rpx;
  }
}
</style>